<template>
  <button
    open-type="chooseAvatar"
    hover-class="none"
    class="overflow-hidden !hover:bg-transparent !active:bg-transparent"
    @chooseavatar="onChooseAvatar"
  >
    <slot :show-value="showValue">
      <image
        :src="showValue"
        mode="scaleToFill"
        class="w-16 h-16 flex-none rounded-full overflow-hidden"
      />
    </slot>
  </button>
</template>

<script setup>
import { ref } from 'vue'
import defaultAvatar from '@/static/avatar.png'

const props = defineProps({
  defaultValue: {
    type: String,
    default: '',
  },
})

const showValue = ref(defaultAvatar)

const uploadAvatar = () => {
  console.log('onChooseAvatar.event', event)
  const { avatarUrl } = event.detail
  showValue.value = avatarUrl
  uploadAvatar()
}
const onChooseAvatar = () => {
  console.log('onChooseAvatar.event', event)
  const { avatarUrl } = event.detail
  showValue.value = avatarUrl
  uploadAvatar()
}
const submitAvatar = () => {
  console.log('onChooseAvatar.event', event)
  const { avatarUrl } = event.detail
  showValue.value = avatarUrl
  uploadAvatar()
}
watch(() => props.defaultAvatar, (val) => {
  if (!value) {
    return
  }
  showValue.value = value
})
</script>

<style></style>
